import { useState } from "react";

function createInitialTodos() {
    const initialTodos = [];

    for (let i = 0; i < 50; i++) {
        initialTodos.push({
            id: i,
            text: 'Item ' + (i + 1)
        });
    }

    return initialTodos;
}

export default function Demo3()
{
    const [count,SetCount] = useState(0);
    const [todos, SetTodos] = useState(createInitialTodos);
    const [text, SetText] = useState('');

    const OnClick = () =>
    {
        let NextCount = count + 1;

        SetCount(NextCount);

        console.log(count);
        console.log(NextCount)
    }

    return (
        <>
            <button onClick={OnClick}>
                You pressed me {count} times
            </button>

            <hr />

            <input
                value={text}
                onChange={e => SetText(e.target.value)}
            />

            <button onClick={() => {
                SetText('');
                SetTodos([{
                id: todos.length,
                text: text
                }, ...todos]);
            }}>Add</button>

            <ul>
                {todos.map(item => (
                <li key={item.id}>
                    {item.text}
                </li>
                ))}
            </ul>
        </>
    )
}